import React from "react";
import classnames from "classnames/bind";
import styles from "./App.module.css";
const cn = classnames.bind(styles);

class FnClass extends React.Component {
  state = {
    name: "张三",
    isShowBorder: false,
  };

  changeName = (e) => {
    this.setState({
      name: e,
    });
  };

  render() {
    return (
      <div>
        子组件内容：
        <Son name={this.state.name} changeParentName={this.changeName}>
          <div
            className={cn({
              son: true,
            })}
          >
            sonnnn
          </div>
          <div
            className={cn({
              son: true,
              border: this.state.isShowBorder,
            })}
          >
            我是classnames 样式
          </div>
          <div
            style={{
              fontSize: "22px",
              color: "#f00",
            }}
          >
            我是style样式
          </div>
        </Son>
        <button
          onClick={() => {
            this.setState({
              isShowBorder: !this.state.isShowBorder,
            });
          }}
        >
          {this.state.isShowBorder ? "隐藏" : "展示"}
        </button>
      </div>
    );
  }
}

class Son extends React.Component {
  state = {
    info: {
      name: "Son",
      age: 18,
    },
  };
  render() {
    return (
      <div className="son">
        父组件名称 {this.props.name}
        <div>
          children:
          {this.props.children}
          scopeSlot:
          <div>
            <button
              onClick={this.props.changeParentName.bind(this, "son 修改的")}
            >
              改变父组件的name
            </button>
          </div>
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <FnClass></FnClass>
    </div>
  );
}

export default App;
